<template>
  <div class="locationDetail">
    <div class="wbg brr">
      <el-form ref="form" :model="form" :rules="rules">
        <div class="pdd" v-loading="loading">
          <div class="flex flexAuto">
            <el-form-item label="库区" class="flex1" prop="location">
              <el-cascader ref="location" v-model="form.location" :props="wearhouseProps" clearable class="el-input" @change="cascaderChange"></el-cascader>
              <!-- <el-cascader ref="location" v-model="form.location" :options="wearhouseList" :props="wearhouseProps" clearable class="el-input" @change="cascaderChange"></el-cascader> -->
            </el-form-item>
            <el-form-item label="库位编号" class="flex1">
              <el-input v-model="form.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="库位名称" class="flex1" prop="name">
              <el-input v-model="form.name" placeholder="请输入库区名称"></el-input>
            </el-form-item>
            <el-form-item label="温度类型" class="flex1" prop="temperatureType">
              <el-select
                v-model="form.temperatureType"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="(item, index) in temperatureType" :key="index" :label="item.value" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex flexAuto">
            <el-form-item label="承重类型" class="flex1" prop="bearingType">
              <el-select
                v-model="form.bearingType"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="(item, index) in bearingType" :key="index" :label="item.value" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用途类型" class="flex1" prop="useType">
              <el-select
                v-model="form.useType"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="(item, index) in wearhouseUseType" :key="index" :label="item.region" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="停用状态" class="flex1" prop="status">
              <div class="el-input">
                <el-radio v-for="(item, index) in warehouseStatus" :key="index" v-model="form.status" :label="item.type.toString()">{{ item.status }}</el-radio>
              </div>
            </el-form-item>
            <el-form-item class="flex1">
            </el-form-item>
          </div>
          <div class="flex flexAuto">
            <el-form-item label="承载面积" class="flex1" prop="maxVolume">
              <el-input v-model="form.maxVolume" placeholder="请输入">
                <template #append>m³</template>
              </el-input>
            </el-form-item>
            <el-form-item label="承载上限" class="flex1">
              <el-input v-model="form.maxNum" placeholder="请输入">
                <template #append>个</template>
              </el-input>
            </el-form-item>
            <el-form-item label="承载容量" class="flex1">
              <el-input v-model="form.maxWeight" placeholder="请输入">
                <template #append>Kg</template>
              </el-input>
            </el-form-item>
            <el-form-item class="flex1">
            </el-form-item>
          </div>
          <div class="flex flexAuto">
            <el-form-item label="库位排/列/层" class="flex1 flex flexAuto treeInput">
              <div class="flex flexAuto">
                <el-input v-model="form.locationRow" placeholder="请输入" class="flex1"></el-input>
                <el-input v-model="form.locationColumn" placeholder="请输入" class="flex1"></el-input>
                <el-input v-model="form.locationLayer" placeholder="请输入" class="flex1"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="库位长/宽/高" class="flex1 flex flexAuto treeInput">
              <div class="flex flexAuto">
                <el-input v-model="form.locationLength" placeholder="请输入" class="flex1">
                <template #append>cm</template>
                </el-input>
                <el-input v-model="form.locationWidth" placeholder="请输入" class="flex1">
                <template #append>cm</template>
                </el-input>
                <el-input v-model="form.locationHigh" placeholder="请输入" class="flex1">
                <template #append>cm</template>
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>
        <el-form-item>
          <div class="upup">
            <el-button round @click="backRouter">返回</el-button>
            <el-button round type="primary" @click="addLocation">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { codeNext, getWearhouseList } from '@/api/warehouse'
import { getAreaAll } from '@/api/area'
import { addLocation, getLocationDetail, modifyLocation } from '@/api/location'
import { temperatureType, bearingType, warehouseStatus, wearhouseUseType } from '@/constant/warehouse'
export default {
  name: 'AreaDetail',
  data () {
    return {
      tabTitle: '新增库位',
      temperatureType,
      warehouseStatus,
      wearhouseUseType,
      bearingType,
      loading: false,
      cascaderValue: [],
      // wearhouseList: [],
      lazyLoadNum: 0,
      wearhouseProps: {
        value: 'id',
        label: 'name',
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      form: {
        areaId: '',
        location: '',
        code: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        status: '0',
        maxVolume: '',
        maxNum: '',
        maxWeight: '',
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        locationLength: '',
        locationWidth: '',
        locationHigh: '',
        warehouseId: ''
      },
      rules: {
        location: [{ required: true, message: '请输选择库区' }],
        name: [{ required: true, message: '请输入库区名' }],
        temperatureType: [{ required: true, message: '请选择温度类型' }],
        bearingType: [{ required: true, message: '请选择承重类型' }],
        useType: [{ required: true, message: '请选择用途类型' }],
        maxVolume: [{ required: true, message: '请输入承载面积' }],
        status: [{ required: true, message: '请选择库区状态' }]
      },
      uploadflag: false
    }
  },
  created () {
    this.setForm()
    this.setPage()
  },
  methods: {
    async lazyLoad (node, resolve) {
      console.log(node)
      const nodes = []
      if (node.level) {
        const { data: { data: arealist } } = await getAreaAll({ warehouseId: node.value, status: 1 })
        arealist.forEach(item => {
          nodes.push({
            id: item.id,
            name: item.name,
            leaf: this.lazyLoadNum >= 1
          })
        })
      } else {
        const { data: { data: wearhouseList } } = await getWearhouseList({ status: 1 })
        wearhouseList.forEach(item => {
          nodes.push({
            id: item.id,
            name: item.name,
            leaf: false
          })
        })
      }
      this.lazyLoadNum++
      console.log(nodes)
      resolve(nodes)
    },
    cascaderChange (val) {
      this.form.warehouseId = val[0]
      this.form.areaId = val[1]
    },
    // 初始化表单
    async setForm () {
      this.loading = true
      if (!this.$route.params?.id) {
        const res = await codeNext('KW')
        this.form.code = res.data.data
        this.uploadflag = false
      } else {
        const res = await getLocationDetail(this.$route.params.id)
        if (res.data.data !== null) {
          console.log(res)
          this.form = res.data.data
          this.form.status = res.data.data.status.toString()
          this.uploadflag = true
          this.form.location = [res.data.data.warehouseId, res.data.data.areaId]
          // this.$refs.location.panel.lazyLoad()
        } else {
          this.backRouter()
          this.$store.dispatch('removeTab', { thisPath: this.$route.path, path: this.$route.path })
          this.$message.warning('获取数据失败')
        }
      }
      // 获取库区
      // const { data: { data: wearhouseList } } = await getWearhouseList({ status: 1 })
      // this.wearhouseList = wearhouseList
      this.loading = false
    },
    backRouter () {
      this.$router.push('/manage-base-info/location')
    },
    async addLocation () {
      await this.$refs.form.validate()
      if (!this.$route.params?.id) {
        await addLocation(this.form)
      } else {
        await modifyLocation(this.form)
        this.$store.dispatch('removeTab', { thisPath: this.$route.path, path: this.$route.path })
      }
      this.$message.success('提交成功')
      this.$refs.form.resetFields()
      this.setForm()
      this.backRouter()
    },
    // 用于给面包屑添加屑
    setPage () {
      console.log(this.$route.params)
      this.tabTitle = this.$route.params?.id ? '编辑库位' : '新增库位'
      this.$store.dispatch('keepAliveListFn', this.$options.name)
      const switchTab = {
        modelName: this.$options.name,
        path: this.$route.path,
        name: this.tabTitle,
        show: true
      }
      if (
        !this.$store.state.switchTab.find(
          (item) => item.path === this.$route.path
        )
      ) {
        if (this.$route.params?.id) {
          switchTab.root = false
        } else {
          switchTab.root = true
        }
        this.$store.commit('pushSwitchTab', switchTab)
      }
    }
  },
  activated () {
    this.setPage()
    console.log(this.uploadflag)
    if (this.$route.params?.id && this.uploadflag) {
      this.setForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.pdd {
  padding: 30px 20px 10px 20px;
  .el-form-item {
    padding-left: 20px;
    &:first-child {
      padding: 0;
    }
  }
}
.upup {
  padding: 30px;
  border-top: 1px solid #f1f1f1;
  text-align: center;
  .el-button {
    margin: 0 15px;
    width: 170px;
  }
}
.treeInput {
  flex-direction: column;
  align-items: flex-start;
  ::v-deep .el-form-item__content {
    width: 100%;
  }
  .el-input {
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
